<template>
<div>
    <!-- 类型区域 -->
    <div class="HeadDiv">
<el-row :gutter="20">
  <el-col :span="6" style="padding:10px;"><span>【题型】：{{dataList.questionType}}</span></el-col>
  <el-col :span="6" style="padding:10px;"><span>【编号】：{{dataList.id}}</span></el-col>
  <el-col :span="6" style="padding:10px;"><span>【难度】：{{dataList.difficulty}}</span></el-col>
  <el-col :span="6" style="padding:10px;"><span>【标签】：{{dataList.tags}}</span></el-col>
  <el-col :span="6" style="padding:10px;"><span>【学科】：{{dataList.subjectName}}</span></el-col>
  <el-col :span="6" style="padding:10px;"><span>【目录】：{{dataList.catalogID}}</span></el-col>
  <el-col :span="6" style="padding:10px;"><span>【方向】：{{dataList.direction}}</span></el-col>
</el-row>
<!-- 题干区域 -->
<div>
  <hr>
  <p>【题干】：</p>
  <p class="ProblemName">{{dataList.question}}</p>
  <p>单选题 选项：（以下选中的选项为正确答案）</p>
  <p v-for="(item,index) in optionsList" :key="index">{{item.code}} <el-radio v-model="radio" :label="item.title"></el-radio></p>
</div>
    </div>
    <hr>
    <div>
        <p>【参考答案】：<el-button type="danger" size="mini" @click="VideoFn">视频答案预览</el-button></p>
        <video width="300" height="350" controls="controls" :src="dataList.src" v-if="VideoShow"></video>
    </div>
    <hr>
    <p>【答案解析】：{{dataList.answer}}</p>
    <hr>
    <p>【题目备注】：{{dataList.remarks}}</p>
    <el-button type="primary" class="Closed" @click.native="CloseFn">关闭</el-button>
</div>
</template>

<script>
// 把题干转化成普通标签
import { html2Text } from '../../../filters/index'
// 列表数据API
import { detail } from '../../../api/hmmm/questions'
export default {
  props: {
    id: {
      type: Number,
      Required: true
    }
  },
  data () {
    return {
      // 视频隐藏
      VideoShow: false,
      //   铺设单选框的数据
      optionsList: [],
      //   铺设页面数据的对象
      dataList: {
        questionType: '', // 题型
        id: '', // 编号
        difficulty: '', // 难度
        tags: '', // 标签
        catalogID: '', // 目录
        subjectName: '', // 学科
        direction: '', // 方向
        question: '', // 题干
        answer: '', // 答案解析
        remarks: '', // 题目备注
        src: '' // 视频数据
      },
      // 铺设页面数组
      list: [],
      // 控制单选框的亮起
      radio: false
    }
  },
  created () {
    //   调用铺设页面封装API的方法
    this.loginApi()
  },
  watch: {
    // 监听又父级传入id是否有值
    async id (newValue) {
    // 把新的id在此传入获取文档接口获取列表数据
      const res = await detail({ id: newValue.toString() })
      const item = res.data
      console.log(item)
      console.log(item)
      if (item.questionType === '1') {
        this.dataList.questionType = '单选'
      } else if (item.questionType === '2') {
        this.dataList.questionType = '多选'
      } else if (item.questionType === '3') {
        this.dataList.questionType = '简答'
      }
      //   难度判断
      if (item.difficulty === '1') {
        this.dataList.difficulty = '简单'
      } else if (item.difficulty === '2') {
        this.dataList.difficulty = '一般'
      } else if (item.difficulty === '3') {
        this.dataList.difficulty = '困难'
      }
      //   编号
      this.dataList.id = item.id
      //   标签
      this.dataList.tags = item.tags
      //   目录
      this.dataList.catalogID = item.catalogID
      //   学科
      this.dataList.subjectName = item.subjectName
      //   方向
      this.dataList.direction = item.direction
      //   题干
      this.dataList.question = html2Text(item.question)
      //   单选
      this.optionsList = item.options
      //   答案解析
      this.dataList.answer = html2Text(item.answer)
      //   题目备注
      this.dataList.remarks = html2Text(item.remarks)
      //   视频
      this.dataList.src = item.videoURL
    }
  },
  methods: {
    // 铺设静态页面
    async loginApi () {
      const res = await detail({ id: this.id.toString() })
      const item = res.data
      console.log(item)
      if (item.questionType === '1') {
        this.dataList.questionType = '单选'
      } else if (item.questionType === '2') {
        this.dataList.questionType = '多选'
      } else if (item.questionType === '3') {
        this.dataList.questionType = '简答'
      }
      //   难度判断
      if (item.difficulty === '1') {
        this.dataList.difficulty = '简单'
      } else if (item.difficulty === '2') {
        this.dataList.difficulty = '一般'
      } else if (item.difficulty === '3') {
        this.dataList.difficulty = '困难'
      }
      //   编号
      this.dataList.id = item.id
      //   标签
      this.dataList.tags = item.tags
      //   目录
      this.dataList.catalogID = item.catalogID
      //   学科
      this.dataList.subjectName = item.subjectName
      //   方向
      this.dataList.direction = item.direction
      //   题干
      this.dataList.question = html2Text(item.question)
      //   单选
      this.optionsList = item.options
      //   答案解析
      this.dataList.answer = html2Text(item.answer)
      //   题目备注
      this.dataList.remarks = html2Text(item.remarks)
      //   视频
      this.dataList.src = item.videoURL
    },
    // 弹出层关闭按钮
    CloseFn () {
      this.$emit('Close')
    },
    // 视频按钮
    VideoFn () {
      this.VideoShow = true
    }
  }
}
</script>

<style>
/* 类型字体大小 */
.HeadDiv{
    font-size: 14px;
}
/* 每个类型之间的间隙 */
.itemDiv{
    padding: 10px;
}
.ProblemName{
    color: Blue;
}
.Closed{
    position: relative;
    right: 0;
    bottom: 0;
}
</style>
